<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../Template/AdminTemplate.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core">

    <ui:define name="content">
        <div class="content-box-header">

            <h3>ADD NEW PRODUCT</h3>

            <div class="clear"></div>

        </div> <!-- End .content-box-header UI -->

        <div class="content-box-content">
            <div class="tab-content" id="tab2">
                <!-- Message -->
                <div class="notification success png_bg">
                    <a href="#" class="close"><img src="resources/images/icons/cross_grey_small.png" title="Close this notification" alt="close" /></a>
                    <div>
			Add product success!
                    </div>
                </div>
                <div class="notification error png_bg">
                    <a href="#" class="close"><img src="resources/images/icons/cross_grey_small.png" title="Close this notification" alt="close" /></a>
                    <div>
					Error notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate, sapien quis fermentum luctus, libero.
                    </div>
                </div>
                <!-- End Message -->
                
                <div class="clear"></div>

                <form action="#" method="post">

                    <fieldset> <!-- Set class to "column-left" or "column-right" on fieldsets to divide the form into columns -->

                        <p>
                            <label>Product Name:</label>
                            <input class="text-input small-input" type="text" id="small-input" name="small-input" /> <span class="input-notification success png_bg">Successful message</span> <!-- Classes for input-notification: success, error, information, attention -->
                            <br /><small>Your's product name</small>
                        </p>

                        <p>
                            <label>Product Price:</label>
                            <input class="text-input medium-input datepicker" type="text" id="medium-input" name="medium-input" /> <span class="input-notification error png_bg">Error message</span>
                        </p>

                        <p>
                            <label>Large form input</label>
                            <input class="text-input large-input" type="text" id="large-input" name="large-input" />
                        </p>

                        <p>
                            <label>Checkboxes</label>
                            <input type="checkbox" name="checkbox1" /> This is a checkbox <input type="checkbox" name="checkbox2" /> And this is another checkbox
                        </p>

                        <p>
                            <label>Radio buttons</label>
                            <input type="radio" name="radio1" /> This is a radio button<br />
                            <input type="radio" name="radio2" /> This is another radio button
                        </p>

                        <p>
                            <label>This is a drop down list</label>              
                            <select name="dropdown" class="small-input">
                                <option value="option1">Option 1</option>
                                <option value="option2">Option 2</option>
                                <option value="option3">Option 3</option>
                                <option value="option4">Option 4</option>
                            </select> 
                        </p>

                        <p style="width:70%">
                            <label>Description</label>
                            <textarea class="text-input textarea wysiwyg" id="textarea" name="textfield" cols="79" rows="15"></textarea>
                        </p>
                        
                        <p>
                        	<label>Upload Image</label>
                           <input class="text-input small-input" type="file" id="small-input" name="small-input" />
                        </p>

                        <p>
                            <input class="button" type="submit" value="Submit" />
                        </p>

                    </fieldset>

                    <div class="clear"></div><!-- End .clear -->

                </form>

            </div>
            <!-- End .content-box -->
        </div>
        <!-- End .content-box -->

    </ui:define>
</ui:composition>
